<template>
	<div>
        <van-tree-select v-model:main-active-index="activeIndex" height="96%" :items="surround" @click-nav="bindSurr">
		<template #content>
            <van-card
			v-for="(it,index) in goodsList" :key="it.id"
			:tag="it.label"
			:desc="`本月销量：${it.like}`"
			:title="it.name"
			:thumb="`/api${it.itemsImg}`"
		>
			<template #tags>
		<van-tag plain type="danger">{{ it.ipRightName }}</van-tag> 
			</template>
			<!-- 加入购物车 -->
			<template #footer>
	<van-button size="mini" color="#01cb88" @click="bindItemsId(it)">查看详情</van-button> 
				<van-button size="mini" color="red" @click="addCart(index)">加入购物车</van-button> 
			</template>
		</van-card>
        </template>
    </van-tree-select>
	</div>
</template>

<script setup>
import { ref, onMounted} from 'vue'
import { RequestClassAPI, RequestListAPI,} from '../../api/goods'
import {useRouter} from 'vue-router'
import { useCounterStore } from '../../stores/users'
import Ajax from '../../api/axios';
import { Toast } from 'vant';

const activeIndex = ref(0)
const router =useRouter()
const goodsList = ref([])
const store = useCounterStore()
// 周边
const surround = ref([])
let Surrounding=ref(0)
// 周边列表
async function bindss() {
	const res = await RequestClassAPI()
	if(res.code === 200){
        surround.value = [
		{ text: '全部', name: '全部' },
		...res.data.map(it => ({
			text: it,
			name: it
		}))
	]
    }
}
// 周边数据列表
async function bindSurr(index) {
	const item = surround.value[index].text
	const res = await RequestListAPI()
	if (index === 0) {
		goodsList.value = res.data.rows
	} else {
		let list = res.data.rows.filter(subItem => {
			const arr = subItem.ipRightName.split(',')
			if (arr.includes(item)) {
				return subItem
			}
		})
		console.log(list);
		goodsList.value = list
	}
}
function bindItemsId(it){
	// router.push({path:'/details'})
	Surrounding=it.itemsId
	router.push({path:'/peripheral',query:{itemsId:Surrounding}})
}
function addCart(_index) {
        console.log('>>>>>',goodsList.value[_index].itemsId);
       Ajax({
        url:'/cart/add',
        method:'POST',
         data :{
            "userId": store.userInfo.id,
            "price": goodsList.value[_index].price,
            "id": goodsList.value[_index].itemsId,
            "time": Date.now(),
            "count": 1,
            "name": goodsList.value[_index].name,
            "detailaddress": "待支付",
            "bgUrl": goodsList.value[_index].itemsImg
        }
       }).then(d => {
        if(d.code === 200) {
            Toast.success('添加成功')
        }
       })
    }

onMounted(() => {
	bindss()
})

</script>

<style lang='scss' scoped></style>
